<template>
  <div class="useplace">
    <el-dialog :visible.sync="visible">
      <div class="panelWrap">
        <div class="title flex flexac flexjcsb fs14 cfff fwb pl p-r-20">
          <div>{{ isEdit ? '修改使用场所类型' : '添加使用场所类型' }}</div>
          <i class="el-icon-close" @click="handleCloseDialog" />
        </div>

        <div class="place-main">
          <div class="place-content m-t-40">
            <div class="place-import flex flexac flextc m-t-30">
              <span class="important"><span class="mustval">*</span>电梯重要等级：</span>
              <el-select v-model="form.importantLevel" class="select p-i-w" placeholder="请选择 电梯重要等级">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </div>

            <div class="place-type flex flexac flextc m-t-30">
              <span class="typeName"><span class="mustval">*</span>使用场合类型名称：</span>
              <el-input v-model.trim="form.name" class="type-input p-i-w" placeholder="请输入 使用场合类型名称" />
            </div>

            <!-- <div v-if="!isEdit" class="flex flexac m-t-15">
                <span class="version name texttr">版本号：</span>
                <el-input v-model.trim="form.version" class="type-input form-input" placeholder="请输入 版本号" />
              </div> -->

            <div class="place-remark flex flexac flextc m-t-30">
              <div class="remark m-r-5"><span>备注：</span></div>
              <el-input
                v-model.trim="form.remark"
                type="textarea"
                resize="none"
                :autosize="{ minRows: 4, maxRows: 5}"
                class="remark-text p-i-w"
                placeholder="请输入 备注..."
              />
            </div>
          </div>
          <div class="place-footerBtn flex flexac flextc m-l-30 m-t-40">
            <el-button v-if="!isEdit" class="btn saveBtn m-r-30 el-icon-circle-check" @click="handleSave">保 存</el-button>
            <el-button v-else type="success" class="btn m-r-30 el-icon-circle-check" @click="handleUpdate">更 新</el-button>
            <el-button class="btn clsoeBtn el-icon-circle-close" @click="handleCloseDialog">关 闭</el-button>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>

import { createPlaceTypeAdd, updateUserPlaceArticle } from '@/api/elevator/elevatorUseplaceType'
import { showNotice } from '@/utils/toolclass'

export default {
  components: { },
  props: {
    value: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: () => ({})
    },
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      form: { ...this.data },
      formOrigin: {
        id: '',
        name: '',
        remark: '',
        version: '',
        importantLevel: ''
      },
      visible: false,
      usePlaceType: [],
      options: [
        {
          value: 1,
          label: '一般'
        },
        {
          value: 2,
          label: '重要'
        }
      ],
      paging: {
        currentPage: 1,
        pageSize: 5,
        pageSizeArr: [5, 10, 15, 20],
        total: 40
      }
    }
  },
  watch: {
    visible(v) {
      this.$emit('input', v)
    },
    value(v) {
      if (this.form.id === 0) {
        this.form = { ...this.formOrigin }
      }
      this.visible = v
    },
    data(v) {
      if (v.id === 0) {
        this.form = { ...this.formOrigin }
      } else {
        this.form = { ...v }
      }
    }
  },
  created() {},
  methods: {
    handleUpdate() {
      if (!(/^\S+$/.test(this.form.importantLevel))) {
        showNotice('error', '提示', '请选择电梯重要等级')
        return
      }
      if (!(/^\S+$/.test(this.form.name))) {
        showNotice('error', '提示', '请输入使用场所名称')
        return
      }
      updateUserPlaceArticle(this.form).then((res) => {
        if (this.form !== '') {
          showNotice('success', '提示', '更新成功')
          this.$emit('handleRefresh')
          this.$emit('handleCloseDialog')
        } else {
          if (res.msg === '失败') {
            showNotice('error', '提示', '保存失败!')
          } else {
            // showNotice('error', '提示', res.msg)
          }
        }
      })
    },
    handleSave() {
      if (!(/^\S+$/.test(this.form.importantLevel))) {
        showNotice('error', '提示', '请选择电梯重要等级')
        return
      }
      if (!(/^\S+$/.test(this.form.name))) {
        showNotice('error', '提示', '请输入使用场所名称')
        return
      }
      this.handleCreateAdd(this.form)
    },
    handleCloseDialog() {
      this.$emit('handleCloseDialog')
      this.$emit('handleRefresh')
    },
    handleCreateAdd(obj) {
      createPlaceTypeAdd(obj).then((res) => {
        if (res.code === '000000') {
          showNotice('success', '提示', '保存成功!')
          this.$emit('handleRefresh')
          this.$emit('handleCloseDialog')
        } else {
          if (res.msg === '失败') {
            showNotice('error', '提示', '保存失败!')
          } else {
            // showNotice('error', '提示', res.msg)
          }
        }
      })
    }
  }
}
</script>

<style rel='stylesheet/scss' lang='scss'>
@import '@/styles/public.scss';

.useplace {
  .panelWrap {
    margin: 10% 0 0 10%;
    height: 440px;
    width: 600px;
    background-color: #f5f5f5;
    position: absolute;
    .place-main {
      .place-content {
        .p-i-w {
          width: 260px; // plblic-input-width 公共宽度
        }
        .place-import {
          .important {
            margin-left: -60px;
          }
          .select {}
        }
        .place-type {
          .typeName {
            margin-left: -90px;
          }
          .type-input {}
        }
        .place-remark {
          .remark {
            height: 80px;
          }
          .remark-text {}
        }
      }
      .place-footerBtn {
        .btn {
          width: 100px;
          height: 40px;
        }
      }
    }
  }
}

</style>
